<template>
  <div>
    <h3 class="text">添加</h3>
    <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
      status-icon>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="state.ruleForm.name" type="text" placeholder="姓名" style="width:250px" autocomplete="off" />
      </el-form-item>
      <!--  -->
      <el-form-item label="部门" prop="address" :rules="rules">

        <el-cascader v-model="state.ruleForm.depid" :options="state.departmentlistdata" :props="state.SetKesDept"
          clearable @change="handleChange" />
      </el-form-item>
      <!--  -->
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="state.ruleForm.mobile" placeholder="手机号" type="text" style="width:250px" autocomplete="off" />
      </el-form-item>
      <!--  -->

      <el-form-item label="地址" prop="address">
        <el-select v-model="state.ruleForm.addressid" placeholder="地址">
          <el-option v-for="item in state.addressdata" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

    </el-form>
    <div class="subm">
      <el-button @click="info">取消</el-button>
      <el-button type="primary" @click="add">添加</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRaw } from "@vue/reactivity";
import { useRouter } from "vue-router"
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { departmentlist, address, addtravel } from "../../api/trahectirylist";
const router = useRouter()


const state = reactive<any>({
  ruleForm: {
    name: "",
    mobile: "",
    addressid: "",
    depid: "",
  },
  addressdata: [],
  //级联框
  SetKesDept: {
    value: "id",
    label: "name",
    children: "son",
  },
  departmentlistdata: [],
});
const { ruleForm, inode } = toRaw(state);
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
  mobile: [{ required: true, message: "请填写手机号", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  depid: [{ required: true, message: "请输入部门", trigger: "blur" }],
});
//部门
const listdepartmentlist = async () => {
  const res: any = await departmentlist();
  console.log(res);

  state.departmentlistdata = res.data[0].son;
};
listdepartmentlist();
// 级联选择器
const handleChange = (value: any) => {
  // console.log(value);
  let res = value.length - 1;
  // console.log(res);
  // console.log(value[res]);
  state.ruleForm.depid = value[res];
  console.log(ruleForm.depid);
};
// 地址
const addresslist = async () => {
  let result = await address();
  console.log(result);
  state.addressdata = result.data.list;
};
addresslist();
//添加
const add = async () => {
  console.log(ruleForm);

  console.log(state.ruleForm.depid);
  console.log(state.ruleForm);
  let res: any = await addtravel(state.ruleForm);
  console.log(res);
  if (res.code == 10000) {
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push('/trajectory/trajectorylist')
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }

};
const info = () => {
  router.push('/trajectory/trajectorylist')
}
</script>

<style lang="less" scoped>
.el-form-item {
  display: flex;
  --font-size: 14px;
  margin-bottom: 18px;
  margin-top: 30px;
}

.subm {
  margin-left: 100px;
}

.demo-ruleForm {
  margin-top: 40px;
  margin-bottom: 30px;
}

.text1,
text {
  margin-left: 80px;
}

.inode {
  margin-left: 80px;
}

h3.text {
  margin-left: 40px;
}
</style>